<template>
    <!-- 银行卡审批 -->
    <view class="out-box">
        <view class="user-info">
            <image class="avatar" src="../../static/logo.png" mode=""></image>
            <view class="user-name">张三</view>
            <view class="todo">注册申请</view>
            <view class="tops">请尽快处理</view>
        </view>
        
        <view class="shadow-box speed">
            <view class="speed-title">处理进度</view>
            <view class="speed-info">
                <view class="speed-item" v-for="i in 5" :key="i">
                    <view class="speed-icon">
                        <image v-if="i == 5" src="../../static/defautl/time-line-2.png" mode=""></image>
                        <image v-else src="../../static/defautl/time-line-1.png" mode=""></image>
                    </view>
                    <view class="speed-detail" :class="{active: i == 5}">
                        {{ stateStr(i) }}
                        <view class="speed-time">
                            12-01 15:33
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="shadow-box approval-detail">
            <view class="approval-title">
                <view class="approval-item">申请人</view>
                <view class="approval-info">张三</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">所属城市</view>
                <view class="approval-info">张三</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">身份证号</view>
                <view class="approval-info">张三</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">手机号码</view>
                <view class="approval-info">张三</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">授权公司</view>
                <view class="approval-info">张三</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">身份证照片</view>
                <view class="approval-info view-pic" @click="previewImage(0)">点击查看</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">营业执照照片</view>
                <view class="approval-info view-pic" @click="previewImage(1)">点击查看</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">授权书照片</view>
                <view class="approval-info view-pic" @click="previewImage(2)">点击查看</view>
            </view>
            <view class="approval-title">
                <view class="approval-item">申请时间</view>
                <view class="approval-info">张三</view>
            </view>
        </view>
        
        <view class="btns-box" v-if="p.state == '0'">
            <view class="btns" @click="showModal('驳回申请')">驳回申请</view>
            <view class="btns agree" @click="showModal('同意申请')">同意申请</view>
        </view>
        
    </view>
</template>

<script>
export default {
    props:{},
    components: {
    },
    data() {
        return {
            p: '',
            imgs: [
                '../../static/defautl/ban.png',
                '../../static/defautl/banner.png',
                '../../static/defautl/banner01.png',
            ]
        }
    },
    onLoad(p) {
        this.p = p
        console.log(this.p)
    },
    watch:{},
    methods: {
        stateStr(i) {
            switch(i) {
                case 1: return '提交申请'; break
                case 2: return '等待高级经理审核'; break
                case 3: return '高级经理通过审核'; break
                case 4: return '等待最终审核人审核'; break
                case 5:  
                    let str
                    switch(Number(this.p.state)) {
                        case 0: str = '等待最终审核人审核'; break
                        case 1: str = '审核通过'; break
                        case 2: str = '审核拒绝'; break
                    }
                    return str
                break
            }
        },
        // 去详情
        goToViewFun(item) {
            
        },
        previewImage(item){
            uni.previewImage({
            	current: item,
            	urls: this.imgs
            })
        },
        showModal(str){
            if ( str == '驳回申请' ) {
                uni.navigateTo({
                    url: '/pages/bankApproval/refuse'
                })
                return
            }
            uni.showModal({
                title: `确认${str}`,
                success: (res) => {
                    if (res.confirm) {
                        console.log(1)
                    }
                }
            });
        }
    },
    mounted() {
        
    }
}
</script>

<style scoped lang="scss">
.out-box{
    padding-bottom: 100rpx;
}
.user-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 30rpx;
    
    .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
    }
    
    .user-name {
        margin-top: 22rpx;
        font-size: 28rpx;
        color: #333;
    }
    
    .todo {
        margin-top: 30rpx;
        font-size: 48rpx;
        color: #333;
    }
    
    .tops {
        margin-top: 28rpx;
        font-size: 24rpx;
        color: #7e7e7e;
    }
}

.speed {
    display: flex;
    
    .speed-title {
        font-size: 24rpx;
        color: #999;
        margin-right: 56rpx;
    }
    
    .speed-info{
        flex: 1;
        
        .speed-item {
            color: #666;
            font-size: 24rpx;
            display: flex;
            align-items: flex-start;
            padding-bottom: 52rpx;
            position: relative;
            
            
            
            &::after{
                content: "";
                position: absolute;
                bottom: 0;
                left: 15rpx;
                width: 1rpx;
                height: 52rpx;
                background: #666;
            }
            
            &:last-child{
                padding-bottom: 0;
            }
            
            &:last-child::after{
                content: none;
            }
            
            .speed-icon {
                width: 33rpx;
                height: 33rpx;
                margin-right: 24rpx;
                
                image{
                    width: 33rpx;
                    height: 33rpx;
                }
            }
            
            .speed-detail{
                flex: 1;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                
                &.active {
                    color: #1072b9;
                }
                
                .speed-time {
                    font-size: 16rpx;
                    color: #a0a0a0;
                }
            }
        }
    }
}

.approval-detail {
    .approval-title {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        color: #999;
        margin-bottom: 66rpx;
        
        &:last-child {
            margin-bottom: 0;
        }
        
        .approval-info{
            color: #333;
            
            &.view-pic{
                color: #1c3f81;
            }
        }
    }
}

.btns-box{
    display: flex;
    padding: 0 30rpx;
    margin-top: 100rpx;
    
    .btns{
        flex: 1;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        border: 1rpx solid #1f4188;
        border-radius: 10rpx;
        color: #1f4189;
        font-size: 30rpx;
        
        &:active{
            background: #1f4188;
            color: #fff;
        }
        
        &.agree {
            margin-left: 50rpx;
            border: 1rpx solid #1f4188;
            background: #1f4188;
            border-radius: 10rpx;
            color: #fff;
            
            &:active{
                background: #fff;
                color: #1f4188;
            }
        }
    }
}
</style>
